<template>
  <div class="header clearfix">
    <div class="site-topbar">
      <div class="container">
        <div class="topbar-nav">
          <a href="/index">小米官网</a>
          <span class="sep">|</span>
          <a href="//www.mi.com/shop">小米商城</a>
          <span class="sep">|</span>
          <a href="//www.miui.com/" target="_blank">MIUI</a>
          <span class="sep">|</span>
          <a href="//iot.mi.com" target="_blank">IoT</a>
          <span class="sep">|</span>
          <a href="//i.mi.com/" target="_blank">云服务</a>
          <span class="sep">|</span>
          <a href="//airstar.com/home" target="_blank">天星数科</a>
          <span class="sep">|</span>
          <a href="//youpin.mi.com/" target="_blank">有品</a>
          <span class="sep">|</span>
          <a href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
          <span class="sep">|</span>
          <a href="//qiye.mi.com/" target="_blank">企业团购</a>
          <span class="sep">|</span>
          <a href="//www.mi.com/aptitude/list/?id=88" target="_blank">资质证照</a>
          <span class="sep">|</span>
          <a href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
          <span class="sep">|</span>
          <a href="//www.mi.com/appdownload/" target="_blank" class="topbar-download">下载app
            <span class="appcode"><img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90"
                                       height="90">
                小米商城APP
               </span>
          </a>
          <span class="sep">|</span>
          <a href="javascript:;">Select Location</a>
        </div>
        <div class="topbar-user">

          <router-link to="/login" v-if="username === null">登录</router-link>
          <router-link to="" v-if="username !== null">{{ username }}</router-link>
          <a href="javascript:void(0);" v-if="username !== null" @click="logout">退出</a>
          <span class="sep">|</span>
          <a href="javascript:void(0);">我的订单</a>
        </div>
        <div class="topbar-cart">
          <a href="/cart" class="my-cart">购物车({{ cartCount }})</a>
        </div>
      </div>
    </div>
    <div class="site-header">
      <div class="container">
        <div class="header-logo">
          <a href="/index" target=""></a>
        </div>
        <div class="header-nav">
          <ul class="category">
            <li class="item" @mouseenter="showChildren()" @mouseleave="productActive = !productActive">
              <a class="product-name" :class="{ 'pro-name-active': productActive}" href="">Xiaomi手机</a>
              <div class="children">
                <ul>
                  <li class="product" v-for="(product, index) in phoneList" :key="index">
                    <a :href="'/product/'+ product.id">
                      <img class="pro-image" :src="product.mainImage" alt="">
                      <p class="pro-name">{{ product.name }}</p>
                      <p class="pro-price">￥{{ product.price }}</p>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="item">
              <a class="product-name" href="">Redmi手机</a>
              <div class="children">
                <ul>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                  <li class="product">
                    <a href="">
                      <img class="pro-image" src="../assets/imgs/xiaomi.webp" alt="">
                      <p class="pro-name">Xiaomi13</p>
                      <p class="pro-price">￥3899.00元</p>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="item">
              <a class="product-name" href="">电视</a>
              <div class="children"></div>
            </li>
            <li class="item">
              <a class="product-name" href="">笔记本</a>
              <div class="children"></div>
            </li>
            <li class="item">
              <a class="product-name" href="">平板</a>
            </li>
            <li class="item">
              <a class="product-name" href="">家电</a>
            </li>
            <li class="item">
              <a class="product-name" href="">路由器</a>
            </li>
            <li class="item">
              <a class="product-name" href="">服务中心</a>
            </li>
            <li class="item">
              <a class="product-name" href="">社区</a>
            </li>
          </ul>
        </div>
        <div class="header-search">
          <input class="search-text" type="text" placeholder="笔记本电脑">
          <span class="search-btn"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getProducts} from "@/api/product";
import {logout} from "@/api/user";

export default {
  name: "NavHeader",
  data() {
    return {
      productActive: false,
      phoneList: []
    }
  },
  methods: {
    showChildren() {
      this.productActive = !this.productActive
      getProducts(
          {
            categoryId: 100012,
            pageSize: 6
          }
      ).then(res => {
        this.phoneList = res.list
      })
    },
    logout() {
      logout().then(() => {
        this.$message.success('退出登录成功')
        this.$cookies.remove("id")
        this.$cookies.remove("mallUserName")
        this.$store.dispatch('saveUserName',null);
        this.$store.dispatch('saveCartCount',0);
      })
    }
  },
  computed:{
    username(){
      return this.$store.state.username;
    },
    cartCount(){
      return this.$store.state.cartCount;
    }
  },
}
</script>

<style lang="scss" scoped>
  .site-topbar {
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background: #333;

    .container {
      display: flex;
      justify-content: space-between;

      .topbar-nav {
        height: 40px;
        line-height: 40px;

        .topbar-download {
          position: relative;

          .appcode {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 40px;
            left: 50%;
            width: 124px;
            height: 0;
            background: #fff;
            margin-left: -55px;
            box-shadow: 0 1px 5px #aaa;
            text-align: center;
            font-size: 14px;
            color: #333;
            line-height: 1;
            overflow: hidden;
            transition: height .3s;
            z-index: 999;
            img {
              margin-bottom: 10px;
            }
          }

          &:hover {
            .appcode {
              height: 148px;
            }

            &:before {
              display: block;
            }
          }

          &:before {
            display: none;
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -8px;
            border-width: 0 8px 8px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
          }
        }
      }

      .topbar-user {
        height: 40px;
        line-height: 40px;

        a {
          padding: 0 5px;
          text-align: center;
        }

        margin-left: 140px;
      }

      .my-cart {
        width: 110px;
        background-color: #f60;
        text-align: center;
        color: #fff;

        &:before {
          content: '';
          display: inline-block;
          width: 16px;
          height: 12px;
          background: url(~@/assets/imgs/icon-cart-checked.png) no-repeat 50%;
          background-size: contain;
          margin-right: 4px;
        }
      }

      a {
        display: inline-block;
        color: #b0b0b0;
        line-height: 40px;
        padding: 0 2px;

        &:hover {
          color: #ffffff;
        }
      }

      .sep {
        margin: 0 5px;
        color: #424242;
        font-family: sans-serif;
      }
    }
  }

  .site-header {
    height: 100px;

    .container {
      position: relative;
      display: flex;
      justify-content: space-between;

      .header-logo {
        width: 62px;
        margin-top: 22px;
        a {
          display: block;
          width: 56px;
          height: 56px;
          background: url("~@/assets/imgs/logo-mi.png") no-repeat 100%;
          background-size: contain;
        }
      }

      .header-nav {
        width: 850px;
        margin-left: 142px;
        .category {
          display: flex;
          height: 88px;
          padding: 12px 0 0 30px;
          font-size: 16px;
          .children {
            position: absolute;
            top: 100px;
            left: 0;
            width: 1226px;
            height: 0;
            opacity: 0;
            overflow: hidden;
            box-shadow: 0 7px 6px 0 rgb(0 0 0 / 6%);
            transition: all .5s;
            background-color: #fff;
            z-index:10;
            ul {
              display: flex;
            }
            .product {
              position: relative;
              flex: 1;
              height: 220px;
              z-index: 999;
              font-size: 12px;
              line-height: 12px;
              text-align: center;
              .pro-image {
                width: auto;
                height: 111px;
                margin-top: 26px;
              }
              .pro-name {
                font-weight: 700;
                margin-top: 19px;
                margin-bottom: 8px;
                color: #333;
              }

              .pro-price {
                color: #f60;
              }
              &:not(:first-child)::after {
                position: absolute;
                top: 28px;
                left: 0;
                content: '';
                border-left: 1px solid #d7d7d7;
                height: 100px;
                width: 1px;
                &:first-child {
                  display: none;
                }
              }
            }
          }

          .item {
            .product-name {
              display: block;
              padding: 26px 10px 38px;
              color: #333;
            }
            &:hover {
              .children {
                height: 220px;
                opacity: 1;
                border-top: 1px solid #e5e5e5;
              }
            }
          }
        }
      }

      .header-search {
        display: flex;
        width: 296px;
        height: 50px;
        margin-top: 25px;
        .search-text {
          width: 245px;
          height: 50px;
          padding: 0 10px;
          font-size: 14px;
          line-height: 50px;
          border: 1px solid #e0e0e0;
          outline: 0;
          &:focus {
            border-color: #ff6600;
          }
        }
        .search-btn {
          display: block;
          width: 50px;
          height: 50px;
          background: url("~@/assets/imgs/icon-search.png") no-repeat 50%;
          background-size: 18px 18px;
          border: 1px solid #e0e0e0;
          border-left: none;
          cursor: pointer;
        }
      }

    }
  }

  .pro-name-active {
    color: #ff6700 !important;
  }
</style>
